<template>
  <div class="cloud-container">
    <div class="control-panel">
      <el-radio-group v-model="currentCategory" @change="handleCategoryChange">
        <el-radio-button label="自然意向">自然意象</el-radio-button>
        <el-radio-button label="情感表达">情感表达</el-radio-button>
        <el-radio-button label="人文活动">人文活动</el-radio-button>
      </el-radio-group>
    </div>
    <div class="cloud-content" ref="cloudChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-wordcloud'

export default {
  name: 'PoetryCloud',
  data() {
    return {
      chart: null,
      currentCategory: '自然意向',
      wordData: {
        '自然意向': [
          { name: '山', value: 445765, category: '地理山水' },
          { name: '风', value: 436015, category: '天文气象' },
          { name: '月', value: 285004, category: '天文气象' },
          { name: '云', value: 337311, category: '天文气象' },
          { name: '日', value: 362679, category: '天文气象' },
          { name: '水', value: 254203, category: '地理山水' },
          { name: '江', value: 220897, category: '地理山水' },
          { name: '花', value: 296440, category: '植物花卉' },
          { name: '草', value: 117819, category: '植物花卉' },
          { name: '柳', value: 81542, category: '植物花卉' }
        ],
        '情感表达': [
          { name: '愁', value: 103613, category: '忧愁' },
          { name: '独', value: 107252, category: '孤独' },
          { name: '别', value: 104379, category: '思念' },
          { name: '相思', value: 15437, category: '思念' },
          { name: '忆', value: 63896, category: '思念' },
          { name: '泪', value: 52747, category: '忧愁' },
          { name: '断肠', value: 4374, category: '忧愁' },
          { name: '寂寞', value: 12771, category: '孤独' }
        ],
        '人文活动': [
          { name: '酒', value: 147576, category: '饮酒' },
          { name: '歌', value: 115860, category: '音乐' },
          { name: '马', value: 113967, category: '战争' },
          { name: '杯', value: 43205, category: '饮酒' },
          { name: '琴', value: 35280, category: '音乐' },
          { name: '剑', value: 31516, category: '战争' }
        ]
      }
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    this.chart && this.chart.dispose()
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.cloudChart)
      this.updateChart()
    },
    updateChart() {
      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          show: true,
          formatter: function(params) {
            return `${params.data.name}: ${params.data.value}次\n类别: ${params.data.category}`
          },
          backgroundColor: 'rgba(255, 123, 0, 0.9)',
          borderColor: '#ff9e45',
          textStyle: {
            color: '#fff'
          }
        },
        series: [{
          type: 'wordCloud',
          shape: 'circle',
          left: 'center',
          top: 'center',
          width: '90%',
          height: '90%',
          right: null,
          bottom: null,
          sizeRange: [12, 60],
          rotationRange: [-45, 45],
          rotationStep: 45,
          gridSize: 8,
          drawOutOfBound: false,
          textStyle: {
            fontFamily: '楷体',
            fontWeight: 'bold',
            color: function() {
              const colors = ['#ff7b00', '#ff9e45', '#ffb347', '#ffd700', '#ffa500'];
              return colors[Math.floor(Math.random() * colors.length)];
            }
          },
          emphasis: {
            textStyle: {
              shadowBlur: 10,
              shadowColor: '#ff7b00'
            }
          },
          data: this.wordData[this.currentCategory].sort((a, b) => b.value - a.value)
        }]
      }
      this.chart.setOption(option)
    },
    handleCategoryChange() {
      this.updateChart()
    },
    handleResize() {
      this.chart && this.chart.resize()
    }
  }
}
</script>

<style scoped>
.cloud-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgba(255, 123, 0, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  overflow: hidden;
}

.control-panel {
  padding: 15px 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
  background-color: rgba(255, 158, 69, 0.1);
  border-bottom: 1px solid rgba(255, 158, 69, 0.2);
}

.cloud-content {
  flex: 1;
  width: 100%;
  height: calc(100% - 60px);
}

:deep(.el-radio-button__inner) {
  background-color: transparent;
  border-color: #ff7b00;
  color: #ff7b00;
}

:deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
  background-color: #ff7b00;
  border-color: #ff7b00;
  box-shadow: -1px 0 0 0 #ff7b00;
}
</style> 